<template>
	<view>
		<block v-if="recordslist.length">
			<view class="notice">
				<fui-notice-bar :content="`您有${recordslist.length}条停车记录待缴费，请选择!`" height="88" size="30" single background="#fff" color="#333">
					<view class="fui-icon__box">
						<fui-icon name="notice-fill" :size="40" color="#ea3030"></fui-icon>
					</view>
				</fui-notice-bar>
			</view>
			<fui-list>
				<fui-list-cell v-for="(item,index) in recordslist" :key="index" arrow @click="checkRecords(item)">
					<view class="item">
						<view class="line">
							<view class="park">
								<fui-icon name="order" size="30" color="#aaaaaa"></fui-icon>
								<fui-text style="margin:0 10rpx;" :text="item.plate_number" color="#000000" :size="28" block></fui-text>
								<fui-tag :text="item.rules_type_txt" background="#599cff" color="#fff" :padding="['8rpx','10rpx']"></fui-tag>
							</view>
							<view class="park">
								<fui-icon name="location" size="30" color="#aaaaaa"></fui-icon>
								<fui-text style="margin-left:10rpx;" :text="item.parking.title" color="#000000" :size="28" block></fui-text>
							</view>
							<view class="park">
								<fui-icon name="wait" size="30" color="#aaaaaa"></fui-icon>
								<fui-text style="margin-left: 10rpx;" :text="formatDateTime(item.entry_time)+' 入场'" color="#000000" :size="28" block></fui-text>
							</view>
							<view class="park" v-if="item.status==7">
								<fui-icon name="wait" size="30" color="#fff"></fui-icon>
								<fui-text style="margin-left: 10rpx;" :text="formatDateTime(item.exit_time)+' 出场'" color="#000000" :size="28" block></fui-text>
							</view>
						</view>
						<view class="price">
							<fui-text fontWeight="800" :text="'￥'+parseNumber(item.total_fee)+'，去支付'" color="#2aaa0e" :size="32" block></fui-text>
						</view>
					</view>
				</fui-list-cell>
			</fui-list>
		</block>
		<view v-if="err" style="padding-top: 220rpx;">
			<fui-result type="fail" title="操作失败" :descr="err">
				<fui-button @click="$reLaunch('index/index')" width="400rpx" height="84rpx" text="返回主页" type="success" bold :margin="['48rpx','0','24rpx']"></fui-button>
			</fui-result>
		</view>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import {formatDateTime,parseNumber} from '@/utils/util.js'
	export default {
		data() {
			return {
				err:'',
				recordslist:[],
			}
		},
		onLoad(e) {
			this.$get('index/records',{parking_id:e.parking_id || '',plate_number:e.plate_number || ''},true).then(res=>{
				this.recordslist=res;
				if(this.recordslist.length===0){
					this.err='没有找到入场记录';
				}
			});
		},
		methods: {
			...methods,
			parseNumber,
			checkRecords:function(e){
				this.$navigateTo('index/parking?records_id='+e.id);
			},
			formatDateTime:function(item){
				return formatDateTime(new Date(item*1000)).slice(0,16);
			}
		}
	}
</script>

<style lang="scss" scoped>
.item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.line{
	display: flex;
	flex-direction: column;
	.park{
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
}
.notice{
	padding: 0 20rpx;
	background-color: #fff;
}
</style>